<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToolBall 压缩版本测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .test-section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #4A90E2;
        }
        
        button {
            background: #4A90E2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: background 0.2s;
        }
        
        button:hover {
            background: #357ABD;
        }
        
        .status {
            margin-top: 10px;
            padding: 10px;
            background: #e8f5e8;
            border-radius: 5px;
            border-left: 4px solid #28a745;
        }
        
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 ToolBall 压缩版本测试</h1>
        
        <div class="test-section">
            <h3>📋 测试说明</h3>
            <p>此页面用于测试压缩后的 ToolBall 组件是否正常工作。</p>
            <ul>
                <li>文件大小：约 20KB（压缩前 38.7KB）</li>
                <li>压缩率：约 47%</li>
                <li>功能完整性：所有功能保持不变</li>
            </ul>
        </div>
        
        <div class="test-section">
            <h3>🎮 功能测试</h3>
            <button onclick="testBasicFunction()">测试基础功能</button>
            <button onclick="testDataStorage()">测试数据保存</button>
            <button onclick="testAllTools()">测试所有工具</button>
            <button onclick="clearLog()">清空日志</button>
        </div>
        
        <div class="test-section">
            <h3>📊 测试状态</h3>
            <div class="status" id="status">
                等待测试...
            </div>
            <div class="log" id="log"></div>
        </div>
    </div>

    <!-- 引入压缩后的 ToolBall 组件 -->
    <script src="../dist/toolball.min.js"></script>
    
    <script>
        // 使用压缩后的API
        const { initToolBall } = ToolBallAPI;
        
        // 初始化工具球
        const toolBall = initToolBall({
            ball: {
                name: '测试球',
                id: 'test-toolball',
                theme: 'light'
            },
            panel: {
                width: 250,
                layout: 'list',
                groups: true
            }
        });

        // 日志记录
        function log(message) {
            const logEl = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            logEl.innerHTML += `[${time}] ${message}\n`;
            logEl.scrollTop = logEl.scrollHeight;
        }

        // 更新状态
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
        }

        // 清空日志
        function clearLog() {
            document.getElementById('log').innerHTML = '';
            updateStatus('日志已清空');
        }

        // 测试基础功能
        function testBasicFunction() {
            log('=== 开始测试基础功能 ===');
            
            // 测试工具球显示
            toolBall.show();
            log('✅ 工具球显示功能正常');
            
            // 测试事件监听
            toolBall.on('show', () => {
                log('✅ 工具球显示事件触发正常');
            });
            
            toolBall.on('panel:show', () => {
                log('✅ 面板显示事件触发正常');
            });
            
            updateStatus('基础功能测试完成');
        }

        // 测试数据保存功能
        function testDataStorage() {
            log('=== 开始测试数据保存功能 ===');
            
            // 添加一个开关工具
            const switchTool = toolBall.addTool('switch', {
                id: 'test-switch',
                name: '测试开关',
                group: '测试',
                defaultValue: false,
                onChange: (value) => {
                    log(`✅ 开关值变化: ${value}`);
                }
            });
            
            // 测试数据保存事件
            toolBall.on('data:change', (key, value) => {
                log(`✅ 数据变化事件: ${key} = ${value}`);
            });
            
            toolBall.on('data:saved', (data) => {
                log(`✅ 数据保存事件: ${JSON.stringify(data)}`);
            });
            
            // 手动设置数据
            toolBall.setData('test-key', 'test-value');
            log('✅ 手动数据设置功能正常');
            
            updateStatus('数据保存功能测试完成');
        }

        // 测试所有工具类型
        function testAllTools() {
            log('=== 开始测试所有工具类型 ===');
            
            // 测试按钮工具
            const buttonTool = toolBall.addTool('button', {
                id: 'test-button',
                name: '测试按钮',
                icon: '🔧',
                group: '测试',
                onClick: async () => {
                    log('✅ 按钮点击功能正常');
                }
            });
            
            // 测试开关工具
            const switchTool = toolBall.addTool('switch', {
                id: 'test-switch',
                name: '测试开关',
                group: '测试',
                defaultValue: true
            });
            
            // 测试选择工具
            const selectTool = toolBall.addTool('select', {
                id: 'test-select',
                name: '测试选择',
                group: '测试',
                options: [
                    { value: 'option1', label: '选项1' },
                    { value: 'option2', label: '选项2' }
                ],
                defaultValue: 'option1'
            });
            
            // 测试滑块工具
            const sliderTool = toolBall.addTool('slider', {
                id: 'test-slider',
                name: '测试滑块',
                group: '测试',
                min: 0,
                max: 100,
                defaultValue: 50
            });
            
            // 测试文本框工具
            const textTool = toolBall.addTool('text', {
                id: 'test-text',
                name: '测试文本框',
                group: '测试',
                placeholder: '请输入测试内容',
                defaultValue: '',
                maxLength: 20
            });
            
            log('✅ 所有工具类型创建成功');
            log('✅ 按钮工具: ' + (buttonTool ? '正常' : '异常'));
            log('✅ 开关工具: ' + (switchTool ? '正常' : '异常'));
            log('✅ 选择工具: ' + (selectTool ? '正常' : '异常'));
            log('✅ 滑块工具: ' + (sliderTool ? '正常' : '异常'));
            log('✅ 文本框工具: ' + (textTool ? '正常' : '异常'));
            
            updateStatus('所有工具类型测试完成');
        }

        // 页面加载完成
        log('ToolBall 压缩版本加载完成');
        log('文件大小: 约 20KB (压缩前 38.7KB)');
        log('压缩率: 约 47%');
        updateStatus('ToolBall 压缩版本已就绪，可以开始测试');
    </script>
</body>
</html>
